<template>
  <div class="subscribe-back" style="position: relative; width: 100%">
    <div class="subscribe-back-content" @click="goBack">
      <i></i>
      <span>返回</span>
    </div>
  </div>
  <div class="page-book">
    <h1>推荐四本有大量书评的书</h1>
    <p>
      在书的海洋中，有许多经典之作深受读者喜爱，并且拥有大量的书评。下面为大家推荐四本这样的好书，希望能给大家带来阅读的乐趣。
    </p>
    <h2>《人类简史：从动物到上帝》</h2>
    <p>
      <img
        src="https://tse2-mm.cn.bing.net/th/id/OIP-C.2IsWattcuUdZBqJr3XZA0AHaKq?rs=1&pid=ImgDetMain"
        alt="人类简史"
        style="width: 100%; max-width: 600px; margin-top: 10px"
      />
    </p>
    <p>
      作者尤瓦尔·赫拉利以独特的视角和深刻的思考，讲述了人类从原始石器时代到 21
      世纪的发展历程。这本书不仅涵盖了历史、科学、哲学等多个领域的知识，还引发了读者对人类未来的深入思考。大量的书评中，读者们纷纷称赞这本书的视野开阔、观点新颖。
    </p>
    <h2>《百年孤独》</h2>
    <p>
      <img
        src="https://p1.ssl.qhimg.com/t017c401645dd63e333.png"
        alt="百年孤独"
        style="width: 100%; max-width: 600px; margin-top: 10px"
      />
    </p>
    <p>
      加西亚·马尔克斯的这部经典之作，以魔幻现实主义的手法描绘了布恩迪亚家族七代人的传奇故事，以及加勒比海沿岸小镇马孔多的百年兴衰。书中丰富的想象力、独特的叙事风格和深刻的主题，让它成为了世界文学史上的经典之作。众多书评中，读者们被书中的故事所深深吸引，感叹作者的才华横溢。
    </p>
    <h2>《思考，快与慢》</h2>
    <p>
      <img
        src="https://pic3.zhimg.com/v2-15e36551da3773bf1ea153483ac7c01e_r.jpg"
        alt="思考，快与慢"
        style="width: 100%; max-width: 600px; margin-top: 10px"
      />
    </p>
    <p>
      丹尼尔·卡尼曼作为行为经济学领域的大师，在这本书中介绍了人类思维的两种模式：快思考和慢思考。通过大量的实验和案例，揭示了人类在决策、判断等方面的认知偏差。书评中，读者们认为这本书对自己的思维方式产生了很大的启发，帮助他们更加理性地看待问题。
    </p>
    <h2>《了不起的盖茨比》</h2>
    <p>
      <img
        src="https://tse3-mm.cn.bing.net/th/id/OIP-C.A9lBJ80onQNAz2SsaWapMgHaKi?rs=1&pid=ImgDetMain"
        alt="了不起的盖茨比"
        style="width: 100%; max-width: 600px; margin-top: 10px"
      />
    </p>
    <p>
      弗朗西斯·斯科特·菲茨杰拉德的这部作品，以 20 世纪 20
      年代的美国为背景，讲述了主人公盖茨比为了追求爱情和梦想而奋斗的故事。书中对美国梦的探讨、对人性的刻画以及优美的语言，使其成为了美国文学的经典之作。众多书评中，读者们被盖茨比的执着和悲剧命运所打动，对那个时代的社会风貌有了更深刻的认识。
    </p>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import { useRouter } from "vue-router";

export default defineComponent({
  setup() {
    const router = useRouter();
    const goBack = () => {
      router.push("/home");
    };
    return {
      goBack,
    };
  },
});
</script>

<style scoped>
.page-book {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  font-family: Arial, sans-serif;
  line-height: 1.6;
  color: #333;
}

.page-book h1 {
  font-size: 28px;
  margin-bottom: 20px;
  text-align: center;
  color: #222;
}

.page-book h2 {
  font-size: 22px;
  margin-top: 30px;
  margin-bottom: 10px;
  color: #222;
}

.page-book p {
  font-size: 20px;
  margin-bottom: 20px;
  text-align: justify;
}

/* 返回 */
.subscribe-back {
  background: #fff;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  box-shadow: 0 1px 0 0 #edf0f2;
  height: 60px;
  line-height: 60px;
  position: relative;
  z-index: 1;
}

.subscribe-back-content {
  cursor: pointer;
  display: inline-block;
  height: 60px;
}

.subscribe-back-content > i {
  background: url()
    no-repeat;
  background-size: contain;
  display: inline-block;
  height: 17px;
  margin-left: 30px;
  vertical-align: middle;
  width: 17px;
}

.subscribe-back-content > span {
  color: #5c6166;
  font-size: 13px;
  letter-spacing: 0;
  line-height: 20px;
  margin-left: 6px;
  vertical-align: middle;
}
</style>
